<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title> 催还图书</title>
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="jquery.cookie.js"></script>
</head>

<body>

<ul>
    <li><a class="active" href="Manager.html">返回上一页</a></li>
    <li><a href="#">催还图书</a></li>
</ul>
<div class="search">
    <input type="text" id="userId" placeholder="输入读者id"><br>
    <button id="sure">搜索</button>
</div>
<div id="t">
    <table id="table" class="mytable" border="2" bgcolor="#f0f8ff"></table>
</div>
<div class="zhezhao" id='zhezhao'>
    <div class="tankuang">
        <div id="header">
            <h2>发送催还消息</h2>
            <div id="header-right" onclick="hidder()">x</div>
            <div class="inputbox">
                <textarea rows="6" cols="50" id="informationText" ></textarea>
            </div>
            <input type="button" id="send" value="发送">
        </div>
    </div>
</div>
</body>

</html>

<style>
    body {
        margin: 0px;
        padding: 0px;
        font-family: sans-serif;
        /*设置字体为sans-serif*/
        background-image: url(images/library.jpg);
        background-size: 100% 100%;
        background-attachment: fixed;
        /*背景图片尺寸为覆盖cover*/
    }

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    }

    li {
        float: left;
    }

    li a,
    .dropbtn {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    li a:hover,
    .user:hover,
    .dropdown:hover {
        background-color: #111;
        /*鼠标移动时背景颜色*/
    }
    #sure{
        text-align: center;
        background: transparent;
        border: none;
        outline: none;
        font-size: 20px;
        color: #03a9f4;
        background: rgb(190, 221, 247);
        padding: 2px 2px;
        cursor: pointer;
        /*光标呈现为指示链接的指针（一只手）*/
        border-radius: 10px;
        position: relative;
        top: auto;
    }

    #cui{
        text-align: center;
        background: transparent;
        border: none;
        outline: none;
        font-size: 15px;
        color: #03a9f4;
        background: rgb(190, 221, 247);
        padding: 4px 4px;
        cursor: pointer;
        /*光标呈现为指示链接的指针（一只手）*/
        border-radius: 10px;
        position: relative;
        top: auto;
    }
    textarea{
        resize: none;
    }

    #send{
        text-align: center;
        background: transparent;
        border: none;
        outline: none;
        font-size: 15px;
        color: #03a9f4;
        background: rgb(190, 221, 247);
        padding: 4px 4px;
        cursor: pointer;
        /*光标呈现为指示链接的指针（一只手）*/
        border-radius: 10px;
        position: relative;
        top: auto;
    }

    .search {
        width: 30%;
        margin: 50px auto;
        margin-left: 550px;
        /*搜索栏的位置*/
        display: flex;
        /**/
    }

    .search input {
        float: left;
        flex: 4;
        height: 30px;
        outline: none;
        border: 1px solid white;
        box-sizing: border-box;
        padding-left: 10px;
    }

    .search button {
        float: right;
        flex: 1;
        height: 30px;
        background-color: rgb(63, 224, 245);
        color: white;
        border-style: none;
        outline: none;
    }

    .search button i {
        font-style: normal;
    }

    .search button:hover {
        font-size: 20px;
        background-color: rgb(63, 224, 245);
    }
    #t{
        padding-top: 0%;
        padding-left:35%;
    }
    mytable {
        width: 500px;
        border: 2px;
        text-align: center;
        border-collapse: collapse;
        background-color: cornsilk;
        padding-left:20%;
    }

    .mytable tr {
        width: 100px;
        padding-left:15%;
    }
    .zhezhao{
        position: fixed;
        left: 28%;
        top: 18%;
        background: #000;
        width: 50%;
        height: 50%;
        background: rgba(50, 5, 5, 5);
    }
    .tankuang{
        position: relative;
        background: ghostwhite;
        width: 100%;
        height: 100%;
        border-radius: 5px;
        margin: 5% auto;
    }
    #header{
        height: 40px;
        text-align: center;
    }
    #header-right{
        position: absolute;
        width: 25px;
        height: 25px;
        border-radius: 5px;
        background: red;
        color: #fff;
        right: 5px;
        top: 5px;
        text-align: center;
        cursor: pointer;
    }


    mytable2 {
        width: 500px;
        border: 2px;
        text-align: center;
        border-collapse: collapse;
        background-color: cornsilk;
        padding-left:20%;
        text-align: center;
    }
</style>
<script>
    var mBookName = "";
    document.getElementById('zhezhao').style.display="none";
    $("#sure").click(function () {
        var userId = $("#userId").val()
        var html = "<tr><th>该用户已借阅的书本ID</th><th>图书名称</th><th>借阅日期</th><th>理应归还日期</th><th>操作</th></tr>"
        if(userId!="") {

            $.ajax({
                url: "http://localhost:8080/borrow/findOverdue",
                type: "post",
                dataType: 'json',
                data: userId,
                contentType: "application/text",
                success: function (res) {
                    if(res.msg=="没有对应的借阅记录"){
                        alert(res.msg)
                    }else{
                        for (var i = 0; i < res.data.length; i++) {
                            F(res.data[i].bookId)
                            html = html + "<tr><td>"+res.data[i].bookId+"</td><td>"+mBookName+"</td><td>"+dateformat(res.data[i].borrowDate)+"</td><td>"+dateformat(res.data[i].shouldDate)+"</td><td>"+"<button id='cui'>催还</button>"+"</td></tr>"
                        }
                        $("#table").html(html)
                    }
                },
                error: function (res) {
                    alert("JSON数据获取失败，请联系管理员！");
                }
            })
        }else {
            alert("用户id不能为空！")
        }
    })
    function dateformat(str){
        if(str == null || str == "" || typeof(str)=="undefined"){
            return "";
        }
        var now = new Date(str);
        var year = now.getFullYear();
        var month =(now.getMonth() + 1).toString();
        var day = (now.getDate()).toString();
        if (month.length == 1) {
            month = "0" + month;
        }
        if (day.length == 1) {
            day = "0" + day;
        }
        var dateTime = year +"-"+ month +"-"+  day;
        return dateTime;
    }
        $(function() {
            $(document).on("click","#cui",function () {
                document.getElementById('zhezhao').style.display="";
                var name = $(this).parents("tr").find("td").eq(1).html();
                console.log(name)
                document.getElementById('informationText').value="您借阅的图书:"+name+",已超期！请尽快归还图书！";
                var information = {
                    userId:$("#userId").val(),
                    informationText:$("#informationText").val()
                }
                $("#send").click(function () {
                        $.ajax({
                            type: 'post',//get是获取数据，post是带数据的向服务器发送请求
                            url: 'http://localhost:8080/information/sendInformation',
                            dataType: 'json',
                            data: JSON.stringify(information),
                            contentType: "application/json",
                            success: function (res) {
                                console.log(res)
                                alert(res.msg)
                                window.location.href = "UrgeReturn.html"
                            },
                            error: function () {
                                alert("JSON数据获取失败，请联系管理员！");
                            }
                        })
                })
            })
        })
    function F(id){
        var bookware = {
            bookWareId:id,
            bookName:"",
            bookAuthor:"",
            bookPublisher:"",
            bookType:""
        }
        $.ajax({
            url:"http://localhost:8080/bookware/findbookware",
            type:"post",
            async: false,
            dataType: 'json',
            data: JSON.stringify(bookware),
            contentType: "application/json",
            success:function (res) {
                console.log(res.msg)
                if(res.msg=="查询图书成功") {
                    mBookName=res.data[0].bookName
                }
            },
            error: function (res) {
                alert("JSON数据获取失败，请联系管理员！");
            }
        })
    }
    function hidder(){
        document.getElementById('zhezhao').style.display="none";
    }
</script>